import React, { Component } from 'react';
// import { Tab } from '@icedesign/base';
import IceContainer from '@icedesign/container';
import DataBinder from '@icedesign/data-binder';
import { Loading } from '@icedesign/base';
import initChart from '../../utils/initChart';
import { generateTreeChartOption, generateSunburstChartOption } from '../../echarts-figures.js'
import SunburstChart from './components/SunburstChart/SunburstChart'
import Similar from './components/Similar/Similar';
import './SimilarCompany.scss';

// const TabPane = Tab.TabPane;
@DataBinder({
  similar: {
    url: `${global.constants.GOLDEYEGETHOST}cattle/character_similar?`,
    type: 'get',
    params: {
      // stockCode: ''
    },
    defaultBindingData: {
    }
  }
})

export default class SimilarCompany extends Component {
  static displayName = 'SimilarCompany';

  constructor(props) {
    // console.log("Home",props);
    super(props);
    this.state = {
      machineCode:localStorage.getItem("secu_code"),
      // 动态数据
      dnumbers: [],
      dlayer: 0,
      time: '当前期',
      dynamicChartId: 'dynamicChart', // 动态相似图表Id
      staticChartId : 'SunburstChart', // 静态相似图表Id
      hasSData: false // 是否有静态数据
    };
  }
  changeTime = (time) => {
    this.setState({
      time
    });
    this.getChartData();
  }
  componentDidMount() {
    this.getChartData();
  }
  /**
   * 获取图表数据
   */
  getChartData() {
    this.props.updateBindingData('similar',{
      params: {
        secu_code: GetUrlParam("secu_code"),
      }
    },(res) => {
      console.log('-----统一接口数据：', res);
      let time = this.state.time; // 当前期还是一年两年
      if(res.flag) {
        res.data.charts.forEach((item, index)=>{
          if(item.type === '静态相似') {
            let chart = item.data.filter((v,i) => {
              console.log(this.state.time);
              return v.type === this.state.time
            });
            let numbers = (chart.length > 0 ? chart[0].data.numbers : []);
            let layer = (chart.length > 0 ? chart[0].data.layer : 0);
            if(!numbers || numbers.length === 0 || numbers[0].children.length == 0){
              this.setState({
                hasSData:true,
              })
            }else{
              initChart(generateSunburstChartOption(
                '静态相似公司',
                numbers,
                layer 
              ), 'SunburstChart');
            }
          } else if(item.type === '动态相似') {
            initChart(generateTreeChartOption(    
              '动态相似公司',
              item.data,
            ), this.state.dynamicChartId);
          }
        })
      }
      
    });
  }

  render() {
    const { similar } = this.props.bindingData;
    const {hasSData, dynamicChartId, staticChartId} = this.state;
    return (
      <div className="home-page" style={{paddingTop:'0',borderTop:'1px solid #f1f1f1'}}>
        <IceContainer style={{borderRadius:'0'}}><SunburstChart changeTime = {this.changeTime} stockCode={GetUrlParam("secu_code")} isLoading={similar.__loading} hasData={hasSData} chartId={staticChartId}/></IceContainer>
        <IceContainer style={{borderRadius:'0'}}><Similar chartId={dynamicChartId} isLoading={similar.__loading} stockCode={GetUrlParam("secu_code")} /></IceContainer>
          
      </div>
    );
  }
}
